<template>
  <div class="search_item">
    <el-row>
      <el-col :span="24">
        <el-button type="primary" @click='open' size="large"  icon="plus">新增商品</el-button>
      </el-col>
    </el-row>
    <div>
      <form-tpl
        :formRule = formRule
      ></form-tpl>
    </div>
  </div>
</template>
<script>
  import formTpl from 'components/formtpl.vue'
  export default {
    data () {
      return {
        formRule: [
          {
            'type': 'input',
            'id': 'name',
            'label': '姓名',
            'defaultVal': '马俊杰',
            'placehold': '请输入姓名',
            'rules': [
              // { required: true, message: '请输入活动名称' },
              { min: 3, max: 5, message: '长度在 3 到 5 个字符' }
            ]
          },
          {
            'type': 'input',
            'id': 'address',
            'label': '地址',
            'defaultVal': '铂涛大厦',
            'placehold': '请输入地址',
            'rules': [
              // { required: true, message: '请输入活动名称' },
              { min: 3, max: 5, message: '长度在 3 到 5 个字符' }
            ]
          },
          {
            'type': 'input',
            'id': 'mobile',
            'label': '电话',
            'defaultVal': 84732847,
            'placehold': '请输入姓名',
            'rules': [
              {
                validator: (rule, value, callback) => {
                  if (isNaN(parseInt(value))) {
                    return callback(new Error('请输入数字'))
                  }
                  callback()
                }
              }
            ]
          },
          {
            'type': 'radio',
            'id': 'radio',
            'label': '类别',
            'option': [
              {
                label: '猴子',
                val: '1'
              },
              {
                label: '小鸟',
                val: '2'
              },
              {
                label: '大牛',
                val: '3'
              },
              {
                label: '小鱼',
                val: '4',
                disabled: true
              }
            ],
            'defaultVal': '2'
          },
          {
            'type': 'checkbox',
            'id': 'checkbox',
            'label': '类别',
            'option': [
              {
                label: '猴子',
                val: '1'
              },
              {
                label: '小鸟',
                val: '2'
              },
              {
                label: '大牛',
                val: '3'
              },
              {
                label: '小鱼',
                val: '4',
                disabled: true
              }
            ],
            'defaultVal': ['1', '2']
          },
          {
            'type': 'select',
            'id': 'select',
            'label': '类别',
            'option': [
              {
                label: '猴子',
                val: '1'
              },
              {
                label: '小鸟',
                val: '2'
              },
              {
                label: '大牛',
                val: '3'
              },
              {
                label: '小鱼',
                val: '4',
                disabled: true
              }
            ],
            'defaultVal': ['1', '2'],
            'placehold': '请选择类目',
            'multiple': true
          },
          {
            'type': 'datePicker',
            'id': 'select',
            'label': '时间',
            'defaultVal': '2017-2-8',
            'placehold': '请选择类目',
            'format': '',
            'disabled': true
          },
          {
            'type': 'upload',
            'id': 'upload',
            'label': '时间',
            'defaultVal': [],
            'placehold': '请选择类目',
            'format': '',
            'disabled': true
          }
        ]
      }
    },
    methods: {
      onSubmit () {
        console.log('submit!')
      },
      open () {
        this.$alert('这是一段内容', '标题名称', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${action}`
            })
          }
        })
      }
    },
    components: {
      formTpl
    }
  }
</script>
<style>
  .form_wrap{
    margin-top: 20px;
  }
</style>
